<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input
        type="text"
        v-model="word"
        @focus="flag=true,tipList.length?null:getTipList()"
        @blur="flag=false"
        @input="getTipList"
      />
      <div class="tip-box" v-show="flag">
        <h2 v-show="!word">大家都在搜</h2>
        <ul>
          <li v-for="(item,index) in tipList">
            <span
              v-show="!word"
              :style="{backgroundColor:index==0?'orangered':index==1?'orange':index==2?'yellow':'gray'}"
              >{{index+1}}</span
            >
            <span @mousedown="word=item,getMvList()">{{item}}</span>
          </li>
        </ul>
      </div>
      <ul>
        <li v-for="item in mvList" @click="getMvUrl(item.id)">{{item.name}}</li>
      </ul>
      <video :src="url" controls style="width: 500px" autoplay></video>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          flag: false, //控制提示框的显示隐藏
          word: "", //输入框内容
          tipList: [], //提示列表
          mvList: [], //mv列表
          url: "", //播放地址
        };
      },
      methods: {
        async getTipList() {
          let { data } = await axios.get(
            "http://localhost:6060/api/www/search/searchKey?key=" + this.word
          );
          // key参数是否有值 响应的结果不一样
          if (this.word) {
            this.tipList = data.data.map((item) => item.split(/=|\r\n/g)[1]);
          } else {
            this.tipList = data.data;
          }
        },
        async getMvList() {
          let { data } = await axios.get(
            "http://localhost:6060/api/www/search/searchMvBykeyWord?key=" +
              this.word
          );
          this.mvList = data.data.mvlist;
        },
        // 根据id请求播放地址
        async getMvUrl(id) {
          // /api/v1/www/music/playUrl?mid=158919&type=mv
          let { data } = await axios.get(
            "http://localhost:6060/api/v1/www/music/playUrl?mid=" +
              id +
              "&type=mv"
          );
          this.url = data.data.url;
        },
      },
    });

    app = app.mount("#app");
  </script>
</html>
